﻿<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>账号管理</title>
    <link rel="stylesheet" href="../../assets/libs/layui/css/layui.css" />
    <link rel="stylesheet" href="../../assets/module/admin.css?v=318" />
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
    <!-- 正文开始 -->
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-card-body">
                <!-- 表格工具栏 -->
                <form class="layui-form toolbar">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">账&emsp;号:</label>
                            <div class="layui-input-inline">
                                <input name="likeusername" class="layui-input" placeholder="输入账号" />
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">手&emsp;机&emsp;号:</label>
                            <div class="layui-input-inline">
                                <input name="likephone" class="layui-input" placeholder="输入手机号" />
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">邮&emsp;箱:</label>
                            <div class="layui-input-inline">
                                <input name="likeemail" class="layui-input" placeholder="输入邮箱" />
                            </div>
                        </div>
                        <div class="layui-inline">&emsp;
                            <button class="layui-btn icon-btn" lay-filter="userTbSearch" lay-submit>
                                <i class="layui-icon">&#xe615;</i>搜索
                            </button>
                        </div>
                    </div>
                </form>
                <!-- 数据表格 -->
                <table id="userTable" lay-filter="userTable"></table>
            </div>
        </div>
    </div>

    <!-- 表格操作列 -->
    <script type="text/html" id="userTbBar">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="reset">重置密码</a>
</script>
    <!-- 表格状态列 -->
    <script type="text/html" id="userTbState">
    <input type="checkbox" lay-filter="userTbStateCk" value="{{d.uid}}" lay-skin="switch"
           lay-text="正常|锁定" {{d.astatus==0?'checked':''}} style="display: none;"/>
    <p style="display: none;">{{d.astatus==0?'正常':'锁定'}}</p>
</script>
    <!-- 表单弹窗 -->
    <script type="text/html" id="userEditDialog">
    <form id="userEditForm" lay-filter="userEditForm" class="layui-form model-form">
        <input name="uid" type="hidden"/>
        <div class="layui-form-item">
            <label class="layui-form-label layui-form-required">账号:</label>
            <div class="layui-input-block">
                <input name="username" id="username" placeholder="请输入账号" class="layui-input"
                       lay-verType="tips" lay-verify="required" required/>
            </div>
        </div>
        <div class="layui-form-item" style="margin-left:120px;">
            <button type="button" class="layui-btn" id="head-upload-btn">
                <i class="layui-icon layui-icon-upload"></i> 头像上传
              </button>
              <div style="width: 132px;">
                <div class="layui-upload-list">
                  <img class="layui-upload-img" name="head" id="head-upload-img" style="width: 100%; min-height: 92px ; height: 100%; border-radius: 50%;">
                  <div id="head-upload-img"></div>
                </div>
                <div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="filter">
                  <div class="layui-progress-bar" lay-percent=""></div>
                </div>
              </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label layui-form-required">密码:</label>
            <div class="layui-input-block">
                <input type="password" name="password" placeholder="请输入密码" class="layui-input"  
                       lay-verType="tips" lay-verify="required" required/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label layui-form-required">邮箱:</label>
            <div class="layui-input-block">
                <input name="email" placeholder="请输入邮箱" class="layui-input"
                       lay-verType="tips" lay-verify="required" required/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label layui-form-required">手机号:</label>
            <div class="layui-input-block">
                <input name="aphone" placeholder="请输入手机号" class="layui-input"
                       lay-verType="tips" lay-verify="required" required/>
            </div>
        </div>
        <div class="layui-form-item text-right">
            <button class="layui-btn" lay-filter="userEditSubmit" lay-submit>保存</button>
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
        </div>

        <input type="hidden" id="pic" name="avatar"/>
    </form>
</script>

    <!-- js部分 -->
    <script type="text/javascript" src="../../assets/libs/layui/layui.js"></script>
    <script type="text/javascript" src="../../assets/js/common.js?v=318"></script>
    <script>
        layui.use(['layer', 'form', 'table', 'util', 'admin', 'xmSelect', 'upload', 'element'], function () {
            var $ = layui.jquery;
            var layer = layui.layer;
            var form = layui.form;
            var table = layui.table;
            var util = layui.util;
            var admin = layui.admin;
            var xmSelect = layui.xmSelect;
            var upload = layui.upload;
            var element = layui.element;
            /* 渲染表格 */
            var insTb = table.render({
                elem: '#userTable',
                url: 'http://169.254.202.137:8080/GetAccount',
                toolbar: ['<p>',
                    '<button lay-event="add" class="layui-btn layui-btn-sm icon-btn"><i class="layui-icon">&#xe654;</i>添加</button>&nbsp;',
                    '</p>'].join(''),
                cellMinWidth: 100,
                cols: [[
                    { type: 'checkbox' },
                    { type: 'numbers' },
                    { field: 'username', title: '账号', sort: true },
                    {
                        field: 'image', title: '头像', sort: true, templet: function (d) {
                            var index = (d.LAY_INDEX - 1) % insTb.config.limit; // 每页从0开始
                            return '<img data-index=' + index + ' src="data:image/png;base64,' + d.avatar + '" style="width: 33.3px; height: 33.3px; border-radius: 50%" lay-event="showImg" tb-img/>';
                        }, align: 'center', width: 90, unresize: true
                    },
                    { field: 'email', title: '邮箱', sort: true },
                    { field: 'aphone', title: '手机号', sort: true },
                    {
                        field: 'rsgistrationtime', title: '创建时间', templet: function (d) {
                            return util.toDateString(d.rsgistrationtime);
                        }, sort: true
                    },
                    { field: 'astatus', title: '状态', templet: '#userTbState', sort: true, width: 100 },
                    { title: '操作', toolbar: '#userTbBar', align: 'center', minWidth: 200 }
                ]],

                parseData: function (res) {
                    return {
                        "code": res.code == 200 ? 0 : res.code,
                        "data": res.data,
                        "count": res.count
                    }
                },

                page: true,

                limit: 10,
                limits: [10, 20, 30]
            });

            /* 表格搜索 */
            form.on('submit(userTbSearch)', function (data) {
                insTb.reload({ where: data.field, page: { curr: 1 } });
                return false;
            });

            /* 表格工具条点击事件 */
            table.on('tool(userTable)', function (obj) {
                let data = obj.data
                if (obj.event === 'edit') { // 修改
                    showEditModel(obj.data);
                } else if (obj.event === 'reset') { // 重置密码
                    resetPsw(obj);
                } else if (obj.event === 'showImg') {
                    var imgList = table.cache['userTable'].map(function (d) {
                        if (d.avatar) {
                            return {
                                alt: d.nickName,
                                src: "data:image/png;base64," + d.avatar
                            }
                        }
                    }).filter(function (item) {
                        return item !== undefined;
                    });
                    let that = $(this);
                    setTimeout(function () {
                        layer.photos({
                            photos: {
                                data: imgList,
                                start: that.data('index')
                            },
                            shade: .1,
                            closeBtn: true
                        });
                    }, 200);
                }
            });

            /* 表格头工具栏点击事件 */
            table.on('toolbar(userTable)', function (obj) {
                if (obj.event === 'add') { // 添加
                    showEditModel();
                }
            });
            /* 显示表单弹窗 */
            function showEditModel(mData) {
                admin.open({
                    type: 1,
                    title: (mData ? '修改' : '添加') + '用户',
                    content: $('#userEditDialog').html(),
                    success: function (layero, dIndex) {
                        // 回显表单数据
                        form.val('userEditForm', mData);
                        mData ? $("#username").attr("readonly", true) : '';
                        mData ? $('#head-upload-img').attr('src', "data:image/png;base64," + mData.avatar) : '';
                        // 表单提交事件
                        form.on('submit(userEditSubmit)', function (data) {
                            var loadIndex = layer.load(2);
                            $.ajax({
                                url: mData ? 'http://169.254.202.137:8080/UpdateAccount' : 'http://169.254.202.137:8080/AddAccount',
                                type: 'Post',
                                dataType: 'json',
                                contentType: 'application/json;charset=utf-8',
                                data: JSON.stringify(data.field),
                                success: function (res) {
                                    layer.close(loadIndex);
                                    if (res.code === 200) {
                                        layer.close(dIndex);
                                        layer.msg(res.msg, { icon: 1 });
                                        insTb.reload({ page: { curr: 1 } });
                                    } else {
                                        layer.msg(res.msg, { icon: 2 });
                                    }
                                },
                            })
                            return false;
                        });

                        $("#head-upload-img").click(function () {
                            Crop();
                        })
                        function Crop() {
                            if ($('#head-upload-img').attr('src') == null)
                                return;
                            admin.cropImg({
                                imgSrc: $('#head-upload-img').attr('src'),
                                onCrop: function (res) {
                                    $('#head-upload-img').attr('src', res);

                                    let avatar = res.replace("data:image/jpeg;base64,", "");
                                    $("#pic").val(avatar)
                                }
                            });
                        }

                        // 禁止弹窗出现滚动条
                        $(layero).children('.layui-layer-content').css('overflow', 'visible');
                    }
                });
                var uploadInst = upload.render({
                    elem: '#head-upload-btn',
                    url: 'http://169.254.202.137:8080/UploadAvatar', // 实际使用时改成您自己的上传接口即可。
                    field: "head",
                    before: function (obj) {
                        // 预读本地文件示例，不支持ie8 --- xxxx.png
                        obj.preview(function (index, file, result) {
                            $('#head-upload-img').attr('src', result); // 图片链接（base64）
                        });

                        element.progress('filter', '0%'); // 进度条复位
                        layer.msg('上传中', { icon: 16, time: 0 });
                    },
                    done: function (res) {
                        // 若上传失败
                        if (res.code == 0) {
                            return layer.msg('上传失败');
                        }

                        // res.data  
                        $("#pic").val(res.data)
                        Crop();

                        // 上传成功的一些操作
                        // …
                        $('#head-upload-text').html(''); // 置空上传失败的状态
                    },
                    error: function () {
                        // 演示失败状态，并实现重传
                        var demoText = $('#head-upload-text');
                        demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                        demoText.find('.demo-reload').on('click', function () {
                            uploadInst.upload();
                        });
                    },
                    // 进度条
                    progress: function (n, elem, e) {
                        element.progress('filter', n + '%'); // 可配合 layui 进度条元素使用
                        if (n == 100) {
                            layer.msg('上传完毕', { icon: 1 });
                        }
                    }
                });
            }
            /* 修改用户状态 */
            form.on('switch(userTbStateCk)', function (obj) {
                var loadIndex = layer.load(2);
                $.get('http://169.254.202.137:8080/UpdateStatu', {
                    uid: obj.elem.value,
                    statu: obj.elem.checked ? 0 : 1
                }, function (res) {
                    layer.close(loadIndex);
                    if (res.code === 200) {
                        layer.msg(res.msg, { icon: 1 });
                    } else {
                        layer.msg(res.msg, { icon: 2 });
                        $(obj.elem).prop('checked', !obj.elem.checked);
                        form.render('checkbox');
                    }
                }, 'json');
            });
            /* 重置密码 */
            function resetPsw(obj) {
                layer.confirm('确定要重置“' + obj.data.username + '”的登录密码吗？', {
                    skin: 'layui-layer-admin',
                    shade: .1
                }, function (i) {
                    layer.close(i);
                    var loadIndex = layer.load(2);
                    $.get('../../json/ok.json', {
                        uid: obj.data.uid
                    }, function (res) {
                        layer.close(loadIndex);
                        if (res.code === 200) {
                            layer.msg(res.msg, { icon: 1 });
                        } else {
                            layer.msg(res.msg, { icon: 2 });
                        }
                    }, 'json');
                });
            }
        });
    </script>
</body>

</html>